<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精准饲喂平台</title>
    <!-- <link rel="icon" type="image/png" href="/logo1.png"> -->
    <link rel="stylesheet" href="/login/css/all.min.css?v=${.Config.basic.version}">
    <script src="/login/js/particles.min.js"></script>
    <script src="./login/js/lottie.min.js"></script>
    <script src="./plugins/jquery/jquery-1.10.2.js"></script>
    <script src="./plugins/layui/layui.js"></script>
    <script src="./plugins/bootstrap-4.6.1/js/bootstrap.js"></script>
    <script src="./plugins/jquery.validate.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #2d3a4b 0%, #1a1f25 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
            overflow: hidden;
            height: 100vh;
        }

        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            background: linear-gradient(135deg, rgba(45, 58, 75, 0.8) 0%, rgba(26, 31, 37, 0.9) 100%);
        }

        .page-container {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            padding: 0 20px;
        }

        .login-container {
            display: flex;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 12px;
            width: min(900px, 95%);
            min-height: 500px;
            max-height: 90vh;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            margin-bottom: 60px;
        }

        @media (max-height: 600px) {
            .login-container {
                min-height: auto;
            }
        }

        .chart-section {
            flex: 1;
            padding: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px 0 0 12px;
        }

        .login-section {
            width: 400px;
            padding: 40px;
            border-left: 1px solid rgba(240, 240, 240, 0.5);
            background: rgba(255, 255, 255, 0.95);
            border-radius: 0 12px 12px 0;
        }

        .logo {
            text-align: center;
            margin-bottom: 20px;
        }

        .title {
            font-size: 24px;
            color: #666;
            margin-bottom: 30px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
            transition: all 0.3s;
        }

        .form-group input:focus {
            border-color: #3c7cff;
            outline: none;
        }

        .form-group input.is-invalid {
            border-color: #ff4d4f;
        }

        .form-group input.is-invalid:focus {
            border-color: #ff4d4f;
            box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
        }

        .input-wrapper .icon.error {
            color: #ff4d4f;
        }

        .error-message {
            color: #ff4d4f;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #3c7cff 0%, #5a9cff 100%);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(60, 124, 255, 0.2);
        }

        .btn:hover {
            background: linear-gradient(135deg, #5a9cff 0%, #3c7cff 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(60, 124, 255, 0.3);
        }

        .forgot-password {
            text-align: right;
            margin-top: 10px;
        }

        .forgot-password a {
            color: #3c7cff;
            text-decoration: none;
            font-size: 14px;
        }

        /* 添加左侧示意图的样式 */
        .chart-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #lottie-animation {
            width: 100%;
            height: 100%;
            max-width: 600px;
            margin: auto;
            opacity: 0.9;
        }

        /* 输入框图标样式 */
        .input-wrapper {
            position: relative;
        }
        
        .input-wrapper .icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 16px;
            transition: color 0.3s;
        }
        
        .input-wrapper input:focus ~ .icon {
            color: #3c7cff;
        }
        
        .input-wrapper input {
            padding-left: 35px !important;
        }

        .copyright {
            position: absolute;
            bottom: 20px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            text-align: center;
            width: 100%;
            z-index: 2;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        
        .copyright a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .copyright a:hover {
            color: #fff;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        #lottie-container {
            width: 100%;
            height: 100%;
            max-width: 500px;
            min-height: 300px;
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    <div class="page-container">
        <div class="login-container">
            <div class="chart-section">
                <div id="lottie-container"></div>
            </div>
            
            <div class="login-section">
                <!-- <div class="logo">
                    <img src="../login/logo.png?v=20250626" alt="" style="height: 80px;">
                </div> -->
                <div id="loginForm">
                    <h2 class="title">精准饲喂平台</h2>
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="icon fa-solid fa-user"></i>
                            <input type="text" id="loginUsername" placeholder="输入用户名">
                        </div>
                        <div class="error-message" id="loginUsernameError"></div>
                    </div>
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="icon fa-solid fa-lock"></i>
                            <input type="password" id="loginPassword" placeholder="输入密码">
                        </div>
                        <div class="error-message" id="loginPasswordError"></div>
                    </div>
                    <button class="btn" id="loginBtn">登录</button>
                    <!-- <div class="forgot-password">
                        <a href="#">忘记密码？</a>
                    </div> -->
                    <div class="register-link" style="text-align: center; margin-top: 20px;">
                        <span style="color: #666;">还没有账号？</span>
                        <a href="register.html" id="registerLink" style="color: #3c7cff; text-decoration: none; margin-left: 5px;">立即注册</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            Copyright © 2025. All Rights Reserved.
            <br>
            <!-- <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备xxxxxxxx号</a> -->
        </div>
    </div>
    <script src="../login/script.js"></script>
    <script>
        // 配置particles.js
        particlesJS.load('particles-js', '../login/particles.json', function() {
            console.log('particles.js loaded');
        });

        // 配置Lottie动画
        const animation = lottie.loadAnimation({
            container: document.getElementById('lottie-container'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: '/login/animations/login-animation2.json'
        });

        // 动画加载完成后修改颜色
        animation.addEventListener('DOMLoaded', function() {
            setTimeout(() => {
                const svg = document.querySelector('#lottie-container svg');
                if (svg) {
                    const elements = svg.querySelectorAll('path, circle, rect, polygon');
                    elements.forEach(el => {
                        if (el.getAttribute('fill') && el.getAttribute('fill') !== 'none') {
                            el.setAttribute('fill', '#3c7cff');
                        }
                        if (el.getAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
                            el.setAttribute('stroke', '#3c7cff');
                        }
                    });
                }
            }, 100);
        });
        // 立即注册弹窗
        document.getElementById('registerLink').onclick = function(e) {
            e.preventDefault();
            if(window.layer){
                layer.msg('暂未开放注册，请联系相关人员。');
            }else{
                alert('暂未开放注册，请联系相关人员。');
            }
        }
    </script>
    <script>
        var $ = null;
        var layer = null;
        var flagName = false;
        var flagPas = false;
        var name, passWord;

        layui.use(['layer', 'form'], function(){
            layer = layui.layer;
            $ = layui.$;

            // 表单验证
            $('.form-validate').each(function() {
                $(this).validate({
                    errorElement: "div",
                    errorClass: 'is-invalid',
                    validClass: 'is-valid',
                    ignore: ':hidden:not(.summernote, .checkbox-template, .form-control-custom),.note-editable.card-block',
                    errorPlacement: function (error, element) {
                        error.addClass("invalid-feedback");
                        if (element.prop("type") === "checkbox") {
                            error.insertAfter(element.siblings("label"));
                        } else {
                            error.insertAfter(element);
                        }
                    }
                });
            });

            // 输入框验证
            $("#loginUsername").change(function(){
                name = $("#loginUsername").val();
                if(name.length < 1){
                    $("#loginUsername").addClass("is-invalid");
                    $("#loginUsernameError").text("请输入用户名").addClass("show");
                    flagName = false;
                } else {
                    $("#loginUsername").removeClass("is-invalid");
                    $("#loginUsernameError").removeClass("show");
                    flagName = true;
                }
            });

            $("#loginPassword").change(function(){
                passWord = $("#loginPassword").val();
                if(passWord.length < 1){
                    $("#loginPassword").addClass("is-invalid");
                    $("#loginPasswordError").text("请输入密码").addClass("show");
                    flagPas = false;
                } else {
                    $("#loginPassword").removeClass("is-invalid");
                    $("#loginPasswordError").removeClass("show");
                    flagPas = true;
                }
            });

            // 登录按钮点击事件
            $("#loginBtn").click(function(){
                login();
            });

            // 密码框回车事件
            $("#loginPassword").bind("keypress", function (event) {
                if (event.keyCode == 13) { login(); }
            });
        });

        if(!window.localStorage){
            layer.msg('不支持本地存储');
        }

        function login() {
            name = $("#loginUsername").val();
            if(name.length < 1){
                $("#loginUsername").addClass("is-invalid");
                $("#loginUsernameError").text("请输入用户名").addClass("show");
                flagName = false;
            } else {
                $("#loginUsername").removeClass("is-invalid");
                $("#loginUsernameError").removeClass("show");
                flagName = true;
            }

            passWord = $("#loginPassword").val();
            if(passWord.length < 1){
                $("#loginPassword").addClass("is-invalid");
                $("#loginPasswordError").text("请输入密码").addClass("show");
                flagPas = false;
            } else {
                $("#loginPassword").removeClass("is-invalid");
                $("#loginPasswordError").removeClass("show");
                flagPas = true;
            }

            if(flagName && flagPas){
                layer.load(1);
                $.ajax({
                    type: 'POST',
                    url: './Api/Login',
                    data: {userid: name, password: passWord},
                    success: function (data) {
                        layer.closeAll('loading');
                        if(data.code == 200){
                            window.localStorage.setItem("expire", data.expire)
                            window.localStorage.setItem("userid", data.userid)
                            window.localStorage.setItem("token", data.token)

                            var token = 'Bearer ' + data.token;
                            $.ajax({
                                type: 'GET',
                                url: '../Api/User',
                                data: {},
                                beforeSend: function(request) {
                                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                                },
                                dataType: "json",
                                success: function (data) {
                                    window.localStorage.setItem("user_info", JSON.stringify(data))
                                    if(data.default_page){
                                        setTimeout(function(){
                                            window.location.href = data.default_page;
                                        }, 200);
                                    }
                                },
                                error: function (XMLHttpRequest, textStatus, errorThrown) {
                                    layer.msg('加载用户信息失败');
                                }
                            });
                        } else {
                            layer.msg('登录失败:' + data.msg);
                            $('#tips').html('账号或密码错误');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.closeAll('loading');
                        layer.open({
                            title: '失败',
                            content: XMLHttpRequest.status
                        });
                    },
                    dataType: "json"
                });
            }
        }
    </script>
</body>
</html>